import {
  ArrowRight,
  BarChart3,
  CheckCircle,
  Clock,
  Heart,
  Mail,
  Package,
  Play,
  Rocket,
  Video,
  Zap,
} from "lucide-react";

export default function HomePage() {
  return (
    <>
      {/* Hero Section with Gradient Background */}
      <div className="hero min-h-[70vh] bg-gradient-primary relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-br from-blue-600/20 to-purple-600/20"></div>
        <div className="hero-content text-center relative z-10">
          <div className="max-w-3xl animate-fade-in">
            <h1 className="text-6xl font-bold text-white mb-6 drop-shadow-lg">
              欢迎来到 <span className="text-yellow-300">Paimon</span>
            </h1>
            <p className="text-xl text-white/90 mb-8 leading-relaxed">
              简洁大方的解决方案，满足您的所有需求。体验前所未有的便捷与效率。
            </p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
              <button
                type="button"
                className="btn btn-lg bg-white/20 border-white/30 text-white hover:bg-white/30 hover-lift backdrop-blur-sm"
              >
                <Play className="h-5 w-5" />
                了解更多
              </button>
              <button
                type="button"
                className="btn btn-lg btn-outline border-white/50 text-white hover:bg-white/10 hover-lift"
              >
                <Video className="h-5 w-5" />
                观看演示
              </button>
            </div>
          </div>
        </div>
        {/* Floating Elements */}
        <div className="absolute top-20 left-10 w-20 h-20 bg-white/10 rounded-full animate-pulse"></div>
        <div
          className="absolute bottom-20 right-16 w-32 h-32 bg-yellow-300/20 rounded-full animate-pulse"
          style={{ animationDelay: "1s" }}
        ></div>
        <div
          className="absolute top-1/2 right-20 w-16 h-16 bg-white/10 rounded-full animate-pulse"
          style={{ animationDelay: "2s" }}
        ></div>
      </div>

      {/* Features Section */}
      <div className="py-20 bg-base-100">
        <div className="container mx-auto px-8">
          <div className="text-center mb-16 animate-fade-in">
            <h2 className="text-4xl font-bold text-base-content mb-4">我们的特色服务</h2>
            <p className="text-xl text-base-content/70 max-w-2xl mx-auto">
              为您提供全方位的解决方案，让您的体验更加出色
            </p>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div
              className="card bg-gradient-to-br from-blue-50 to-indigo-100 shadow-xl hover-lift group animate-fade-in"
              style={{ animationDelay: "0.1s" }}
            >
              <div className="card-body items-center text-center p-8">
                <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                  <Package className="w-8 h-8 text-white" />
                </div>
                <h2 className="card-title text-2xl mb-4 text-gray-800">产品</h2>
                <p className="text-gray-600 leading-relaxed mb-6">
                  丰富多样的产品选择，满足您的各种需求。从基础版本到专业版本，总有一款适合您。
                </p>
                <div className="card-actions">
                  <button type="button" className="btn btn-primary hover-lift">
                    <ArrowRight className="h-4 w-4" />
                    查看详情
                  </button>
                </div>
              </div>
            </div>

            <div
              className="card bg-gradient-to-br from-green-50 to-emerald-100 shadow-xl hover-lift group animate-fade-in"
              style={{ animationDelay: "0.3s" }}
            >
              <div className="card-body items-center text-center p-8">
                <div className="w-16 h-16 bg-gradient-to-br from-green-500 to-emerald-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                  <CheckCircle className="w-8 h-8 text-white" />
                </div>
                <h2 className="card-title text-2xl mb-4 text-gray-800">服务</h2>
                <p className="text-gray-600 leading-relaxed mb-6">
                  专业的服务团队，为您提供优质的售后保障。7x24小时在线支持，让您无后顾之忧。
                </p>
                <div className="card-actions">
                  <button type="button" className="btn btn-primary hover-lift">
                    <ArrowRight className="h-4 w-4" />
                    查看详情
                  </button>
                </div>
              </div>
            </div>

            <div
              className="card bg-gradient-to-br from-purple-50 to-violet-100 shadow-xl hover-lift group animate-fade-in"
              style={{ animationDelay: "0.5s" }}
            >
              <div className="card-body items-center text-center p-8">
                <div className="w-16 h-16 bg-gradient-to-br from-purple-500 to-violet-600 rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300">
                  <Clock className="w-8 h-8 text-white" />
                </div>
                <h2 className="card-title text-2xl mb-4 text-gray-800">关于我们</h2>
                <p className="text-gray-600 leading-relaxed mb-6">
                  了解我们的公司文化和发展历程。我们致力于为客户创造价值，推动行业发展。
                </p>
                <div className="card-actions">
                  <button type="button" className="btn btn-primary hover-lift">
                    <ArrowRight className="h-4 w-4" />
                    查看详情
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* Stats Section */}
      <div className="py-20 bg-gradient-to-r from-gray-50 to-gray-100">
        <div className="container mx-auto px-8">
          <div className="stats stats-vertical lg:stats-horizontal shadow-2xl w-full bg-white rounded-2xl">
            <div className="stat place-items-center animate-fade-in">
              <div className="stat-figure text-primary">
                <Zap className="inline-block w-8 h-8 stroke-current" />
              </div>
              <div className="stat-title">活跃用户</div>
              <div className="stat-value text-primary">10K+</div>
              <div className="stat-desc">持续增长中</div>
            </div>

            <div className="stat place-items-center animate-fade-in" style={{ animationDelay: "0.2s" }}>
              <div className="stat-figure text-secondary">
                <BarChart3 className="inline-block w-8 h-8 stroke-current" />
              </div>
              <div className="stat-title">项目完成</div>
              <div className="stat-value text-secondary">1,200+</div>
              <div className="stat-desc">成功案例</div>
            </div>

            <div className="stat place-items-center animate-fade-in" style={{ animationDelay: "0.4s" }}>
              <div className="stat-figure text-accent">
                <Heart className="inline-block w-8 h-8 stroke-current" />
              </div>
              <div className="stat-title">客户满意度</div>
              <div className="stat-value text-accent">98%</div>
              <div className="stat-desc">五星好评</div>
            </div>
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="py-20 bg-gradient-secondary">
        <div className="container mx-auto px-8 text-center">
          <div className="max-w-3xl mx-auto animate-fade-in">
            <h3 className="text-4xl font-bold text-white mb-6">准备开始您的旅程？</h3>
            <p className="text-xl text-white/90 mb-8">立即加入我们，体验前所未有的服务品质</p>
            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button type="button" className="btn btn-lg bg-white text-gray-800 hover:bg-gray-100 border-0 hover-lift">
                <Rocket className="h-5 w-5" />
                立即开始
              </button>
              <button
                type="button"
                className="btn btn-lg btn-outline border-white text-white hover:bg-white/10 hover-lift"
              >
                <Mail className="h-5 w-5" />
                联系我们
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
